:root {
  --bg: #f7f8fa;
  --card-bg: #fff;
  --text: #222;
  --primary: #007aff;
  --primary-light: #e6f0ff;
  --border: #e5e5ea;
  --shadow: 0 4px 24px 0 rgba(0,0,0,0.08);
  --radius: 18px;
  --transition: 0.3s cubic-bezier(.4,0,.2,1);
}

[data-theme='dark'] {
  --bg: #18191a;
  --card-bg: #23272f;
  --text: #f7f8fa;
  --primary: #0a84ff;
  --primary-light: #1e2a3a;
  --border: #33343a;
  --shadow: 0 4px 24px 0 rgba(0,0,0,0.32);
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: 'SF Pro Display', 'PingFang SC', 'Helvetica Neue', Arial, sans-serif;
  transition: background var(--transition), color var(--transition);
} 